
// 渲染页面
let shopS = document.querySelector('.shopS');
let cartall = document.querySelector('.cartall');
let savetall = document.querySelector('.savetall');

render(lists);


function render(goodLists) {
    shopS.innerHTML = goodLists.map((item) => {
        let saveTotal = item.num * (item.oriPrice - item.nowPrice);
        return `
            <tr class="shopList" idx="${item.id}">
            <td class="imgTd">
                <img class="shops" src="${item.img}" alt="" srcset="">
            </td>
            <td class="titleTd">
                <h6>${item.title}</h6>
                <span>ID:#${item.id}</span>
                <span>Size:${item.size}</span>
            </td>
            <td class="Son2">
                <span class="reduce">-</span>
                <input type="text" disabled value="${item.num}" class="count">
                <span class="add">+</span>
            </td>
            <td class="Son3">
                <del class="oriPrice">${item.oriPrice} py6</del>
                <b class="nowPrice">${item.nowPrice} py6</b>
            </td>
            <td class="Son4">
                <span class="priceAll">${(item.nowPrice * item.num).toFixed(2)} py6</span><span>You save ${saveTotal.toFixed(2)} py6</span>
            </td>
            <td class="Son5">
                <span class="saveAll"></span>
                <img class="del" src="../images/del.png" alt="">    
            </td>
        </tr>`
    }).join('')

    // 计算总价
    let carTall = goodLists.reduce((pre, cur, index) => {
        return pre + cur.nowPrice * cur.num;
    }, 0)
    cartall.firstElementChild.innerHTML = carTall.toFixed(2) + ' py6.';

    // 计算折扣总价
    let saveTall = goodLists.reduce((pre, cur, index) => {
        return pre + cur.num * (cur.oriPrice - cur.nowPrice)
    }, 0)
    savetall.innerHTML = `Your Total Saving:${saveTall.toFixed(2)} py6.`
}

// 定义变量来接收 获取点击元素的父元素，和点击的商品id
let $tr, $id;

// 事件委托的形式绑定点击事件
let shop = document.querySelector('.shop');
shop.onclick = (e) => {
    switch (e.target.className) {
        // 点击减数量
        case 'reduce':
            // 获取点击这个元素的父元素
            $tr = e.target.parentNode.parentNode;
            // 拿到父元素中存储的idx属性
            $id = $tr.getAttribute('idx');
            // 通过这个idx属性去 数据库中匹配数据，改数据
            lists.forEach(item => {
                // 如果 获取的id 和数组中对象对应的id一样的时候，更改这个条数据 num值
                // 并且数量不等于 1，只有大于1才能见减数量
                if (item.id == $id && item.num > 1) {
                    item.num -= 1;
                    // 数据改变之后重新渲染页面
                    render(lists);
                }
            })
            break

        // 点击加数量 
        case 'add':
            $tr = e.target.parentNode.parentNode;
            $id = $tr.getAttribute('idx');
            lists.forEach(item => {
                if (item.id == $id) {
                    item.num += 1;
                    render(lists);
                }
            })
            break

        // 点击删除此商品
        case 'del':
            let res = confirm('你确定删除吗');
            if (res) {

                $tr = e.target.parentNode.parentNode;
                $id = $tr.getAttribute('idx');
                lists.forEach((item, index, array) => {
                    if (item.id == $id) {
                        // 把当前点击的这个商品从数组中删除
                        array.splice(index, 1)
                        render(lists);
                    }
                })
            }
            break
    }
}